<template>
  <div class="main" :style="{
    '--w': args.width,
    '--h': args.height,
    '--color': args.color,
    '--bg': args.bg,
    '--snake-color': args.snakeColor
  }">
    <div class="player">
      <div class="line" v-for="i in args.height" :key="i">
        <k-item v-for="j in args.width"
          :x="i - 1" :y="j - 1" :snake="snake" :candies="candies"/>
      </div>
    </div>
    <div class="keys">
      <div class="up" @click="chageWay('n')">
        <p>↑</p>
      </div>
      <div class="down" @click="chageWay('s')">
        <p>↓</p>
      </div>
      <div class="left" @click="chageWay('w')">
        <p>←</p>
      </div>
      <div class="right" @click="chageWay('e')">
        <p>→</p>
      </div>
    </div>
  </div>
</template>
<script setup>
import Color from "color";
import KItem from "./KItem.vue"
import { reactive, ref, watchEffect } from "vue"
const nowUrl = new URL(window.location.href)
const searchParams = (name, parser, decider) =>
  decider(parser(nowUrl.searchParams.get(name), 10))
let onPlay=true
const args = reactive({
  width: searchParams("w", parseInt, (value) => value > 1 ? value: 20),
  height: searchParams("h", parseInt, (value) => value > 1 ? value : 20),
  color: searchParams("c", a => a, (value) => {
    try {
      return Color(value || "1")
    } catch {
      return Color("#a8bfff")
    }
  }),
  auto: searchParams("a", a => a, (value) => value !== null)
})
watchEffect(() => {
  args.color
  args.bg = (() =>
    searchParams("b", a => a, (value) => {
      try {
        return Color(value || "1")
      } catch {
        return args.color.isLight() ? Color("#000") : Color("#fff")
      }
    })
  )()
  args.snakeColor = (() =>
    searchParams("s", a => a, (value) => {
      try {
        return Color(value || "1")
      } catch {
        return Color("#ffff00")
      }
    })
  )()
})
function randomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min)
}
const snake=reactive([{
  x: parseInt(args.width/2),
  y: parseInt(args.width/2),
}])
let way=[0,0]
let stared=false
function chageWay(nextWay){
  if(nextWay==='w' && (way[0]!==0 || !stared)){
    way=[0,-1]
    stared=true
  }
  if(nextWay==='e' && (way[0]!==0 || !stared)){
    way=[0,1]
    stared=true
  }
  if(nextWay==='n' && (way[1]!==0 || !stared)){
    way=[-1,0]
    stared=true
  }
  if(nextWay==='s' && (way[1]!==0 || !stared)){
    way=[1,0]
    stared=true
  }
}
window.addEventListener("keydown",e=>{
  if (e.key==="ArrowUp"){
    chageWay('n')
  }else if (e.key==="ArrowDown"){
    chageWay('s')
  }else if (e.key==="ArrowLeft"){
    chageWay('w')
  }else if (e.key==="ArrowRight"){
    chageWay('e')
  }
})
window.addEventListener('touchmove',e=>{
  console.log(e.targetTouches[0])
})

setInterval(()=>{
  const next={
    x:(snake[0].x+way[0]+args.height)%args.height,
    y:(snake[0].y+way[1]+args.width)%args.width
  }
  if(snake.find(i=>i.x===next.x&&i.y===next.y)&&stared){
    onLoss()
  }
  snake.unshift(next)
  if (!(next.x===candies.value.x&&next.y===candies.value.y)){
    snake.pop()
  }else{
    if (snake.length===args.width*args.height){
      onWin()
    }
    candies.value.x=randomInt(0, args.width - 1)
    candies.value.y=randomInt(0, args.height - 1)
  }
},300)
const  candies=ref({
  x: randomInt(0, args.width - 1),
  y: randomInt(0, args.height - 1),
})

function onLoss() {
  if (!onPlay){return}
  onPlay=false
  alert("FAIL")
  location.reload()
}
function onWin() {
  if (!onPlay){return}
  onPlay=false
  alert("WIN")
  location.reload()
}

</script>
<style scoped lang="scss">
.main {
  position: fixed;
  inset: 0;
  background-color: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 1rem;
  --size: calc(min(50vh / var(--h), 70vw / var(--w)));
  --gap: calc(min(10vh / (var(--h) - 1), 10vw / (var(--w) - 1)));
}
.keys{
  color: var(--color);
  width: 20vh;
  height: 20vh;
  position: relative;
  &>*{
    $borderWidth: 0.1rem;
    border-radius: $borderWidth*5;
    border: $borderWidth solid var(--color);
    width: calc(33.3% - 2 * $borderWidth);
    height: calc(33.3% - 2 * $borderWidth);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    cursor: pointer;
    transition: 0.3s;
    &:hover{
      background-color: var(--color);
      color: var(--bg);
    }
    &>p{
      margin: 0;
      font-size: 1.5rem;
      font-weight: bold;
    }
    &.up{
      left: 33.3%;
      top: 0;
    }
    &.down{
      left: 33.3%;
      bottom: 0;
    }
    &.left{
      left: 0;
      top: 33.3%;
    }
    &.right{
      right: 0;
      top: 33.3%;
    }
  }
}
.player {
  display: flex;
  flex-direction: column;
  flex-grow: 0;
  flex-shrink: 0;

  row-gap: var(--gap);

  &>.line {
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    column-gap: var(--gap);
  }
}
</style>